<script setup>
import { ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router'

import SiteNotice from '../components/SiteNotice.vue'
import weapondata from '../data/GunWeaponData.json'
import skilldata from '../data/BattleSkillDisplayData.json'
import modtypes from '../data/WeaponModTypeData.json'
import elems from '../data/LanguageWeaponElementData.json'
import attrs from '../data/attrs.json'
import { store } from '../store/store.js'
import { getText, getParsedText } from '../store/txtstore.js'
import '../assets/property.css'

const ranks = {'3': '旧式', '4': '标准', '5': '精英'}
const types = ['', '手枪', '冲锋枪', '步枪', '突击步枪', '机枪', '霰弹枪', '刀']

const lvCoeff = []
for (let l = 60; l--;) {
  lvCoeff.unshift(store.properties.get(30001+l)[2])
}
const data = ref({})
const fit = ref({})
const attr = ref([])
const mods = ref([])
const skills = ref([])
const trait = ref()
const special = ref()
const lv = ref(60)

const route = useRoute()
const weapon = weapondata.data[route.params.uid]
loadData(weapon)

function loadData(weapon) {
  data.value = {
    name: getText(weapon[2][1]),
    intro: getText(weapon[3][1]),
    type: types[weapon[4]],
    pic: weapon[8],
    rank: weapon[11],
    skill: weapon[13],
    attr: store.properties.get(weapon[23]),
    special: weapon[25],
    capacity: weapon[26]||30,
    modTypes: weapon[33],
    elem: weapon[36],
    trait: weapon[37]
  }
  if (weapon[31]) {
    import('../data/GunCharacterData.json').then(obj => {
      fit.value = obj.data[weapon[31]]
    })
  }
  loadAttr(data.value.attr)
  loadMod(data.value.modTypes)
  loadSkill(data.value.skill)
  loadTrait(data.value.trait)
  special.value = skilldata.data[data.value.special]
}

function loadAttr(data) {
  for (const p of Object.entries(data)) {
    if (p[0] != 1) {
      attr.value.push(p)
    }
  }
}

function loadMod(modIds) {
  for (const t of modIds) {
    const mod = modtypes.data[t]
    mods.value.push([getText(mod[5][1]), mod[4]])
  }
}

function loadSkill(skillId) {
  for (let l = 6; l--;) {
    skills.value.unshift(skilldata.data[skillId+l])
  }
}

function loadTrait(traitId) {
  const traitdata = skilldata.data[traitId]
  if (traitdata) {
    const traitdesc = traitdata[3] || traitdata[5]
    trait.value = getParsedText(traitdesc[1])
  }
}
</script>

<template>
  <SiteNotice/>
  <main>
    <h1>{{ data.name }}</h1>
    <article>
      <img :src="`/exilium/icons/weapon/${data.pic}_256.png`" style="grid-area: p; width: 128px;">
      <table style="grid-area:a;">
        <tr>
          <th>种类</th>
          <td>{{ elems[data.elem] }} / {{ data.type }}</td>
        </tr>
        <tr>
          <th>稀有度</th>
          <td :class="['rank-'+data.rank]">{{ ranks[data.rank] }}</td>
        </tr>
        <tr v-if="fit[9]">
          <th>烙印人形</th>
          <td>
            <RouterLink :to="'/gun/'+fit[9]">{{ getText(fit[2][1]) }}</RouterLink>
          </td>
        </tr>
        <tr>
          <td colspan="2">{{ data.intro }}</td>
        </tr>
      </table>
      <table class="attr">
        <tr>
          <th colspan="2">属性</th>
        </tr>
        <tr>
          <td>熟练度</td>
          <td><input type="number" v-model.number="lv" min="1" max="60"></td>
        </tr>
        <tr v-for="a of attr">
          <td :class="'attr-'+a[0]">{{ attrs[a[0]] }}</td>
          <td>{{ a[0] == 2 ? Math.ceil(a[1]*lvCoeff[lv-1]/1000) : a[1]/10+'%' }}</td>
        </tr>
      </table>
      <table style="grid-area:c;" id="mods">
        <tr>
          <th :colspan="mods.length">配件类型</th>
        </tr>
        <tr>
          <td v-for="t of mods"><img :src="`/exilium/icons/mod/${t[1]}.png`" :title="t[0]"><br>{{ t[0] }}</td>
        </tr>
      </table>
      <table style="grid-area:d;">
        <tr>
          <td class="skill-lvs">
            <p style="font-weight:bold;">武器特性</p>
            <p v-html="getText(skills[0][2][1])" style="color:orange;"></p>
            <p v-for="n in 6" v-html="getParsedText(skills[n-1][3][1])" class="skill-lv"></p>
          </td>
        </tr>
        <tr v-if="trait">
          <td>
            <p style="font-weight:bold;">特质</p>
            <p v-html="trait"></p>
          </td>
        </tr>
        <tr v-if="special">
          <td>
            <p style="font-weight:bold;">烙印增效</p>
            <p v-html="getParsedText(special[2][1])" style="color:orange;"></p>
            <p v-html="getParsedText(special[3][1])"></p>
          </td>
        </tr>
      </table>
    </article>
  </main>
</template>

<style scoped>
article {
  display: grid;
  gap: 6px;
  grid-template-areas:
    "p ."
    "a d"
    "b d"
    "c d"
    ". d";
  grid-template-columns: 1fr 1fr;
}
table {
  border: 1px solid;
  border-radius: 6px;
}
.attr {
  border: none;
  grid-area:b;
  text-align:center;
  width: 100%;
}
.attr,
.attr caption {
  background: #556167;
  box-shadow: 0 2px 4px #556167;
  color: white;
  text-align: center;
  width: 100%;
}

#mods {
  text-align: center;
  width: 100%;
}
#mods img {
  background-color: gray;
  width: 64px;
}

.skill-lvs {
  counter-reset: lvCounter;
}
.skill-lv {
  counter-increment: lvCounter;
}
.skill-lv:nth-child(2n+4) {
  background: #0001;
}
.skill-lv::before {
  color: orange;
  content: 'Lv.' counter(lvCounter) '：';
  font-weight: bold;
}

@media (max-width: 540px) {
  article {
    display: block;
  }
}
</style>
